<template>
  <div class="component-editor">
    <client-only>
      <component
      :is="toolBarComponent"
      :mode="mode"
      :editor="editor"
      :default-config="toolbarConfig"
    ></component>
    <component
      :is="editorComponent"
      :mode="mode"
      v-model="html"
      :default-config="editorConfig"
      @onCreated="handleEditorMounted"
    ></component>
    </client-only>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
export default {
  name: 'ComponentEditor',
  props: {
    modelValue: {
      default: '',
      type: String
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    placeholder: String
  },
  model: {
    prop: 'modelValue',
    event: 'input'
  },
  data () {
    return {
      editor: null,
      mode: 'simple',
      toolBarComponent: null,
      editorComponent: null,
      html: '',
      toolbarConfig: {
        toolbarKeys: [
          'headerSelect',
          'bold',
          'underline',
          'italic',
          'color',
          'fontSize',
          'fontFamily',
          'lineHeight',
          'bulletedList',
          'numberedList',
          {
            'key': 'group-justify',
            'title': '对齐',
            'iconSvg': '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            'menuKeys': [
              'justifyLeft',
              'justifyRight',
              'justifyCenter',
              'justifyJustify'
            ]
          },
          {
            'key': 'group-indent',
            'title': '缩进',
            'iconSvg': '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
            'menuKeys': [
              'indent',
              'delIndent'
            ]
          },
          'fullScreen'
        ]
      },
      editorConfig: {
        placeholder: this.placeholder || '请展示你的描述信息吧~',
        readOnly: this.readOnly,
        autoFocus: false,
        scroll: false
      }
    }
  },

  created () {
    if (process.client) {
      const editor = require('@wangeditor/editor-for-vue')
      this.editorComponent = editor.Editor
      this.toolBarComponent = editor.Toolbar
    }
  },

  methods: {
    handleEditorMounted (editor) {
      this.editor = Object.seal(editor)
    }
  },

  watch: {
    modelValue: {
      handler  (newVal) {
        this.html = newVal
      },
      immediate: true,
      deep: true
    },

    html (newVal) {
      this.$emit('input', newVal)
    }
  },

  beforeDestroy () {
    this.editor && this.editor.destroy()
  }
}
</script>

<style scoped lang="less">
.component-editor {
  width: 100%;
  ::v-deep .w-e-text-placeholder {
    font-style: normal;
    top: 13px;
  }
  ::v-deep .w-e-bar-item {
    padding: 0;
    button {
      padding: 0 6px;
    }
  }
  ::v-deep {
    .w-e-text-container {
      padding: 12px 0;
      p {
        margin: 0;
        color: #000;
      }
    }
  }
}
</style>
